<template>
  <div>
    <el-form ref="form" label-width="80px" :inline="true">
      <el-form-item>
        <el-button type="primary" @click="add">添加设备</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" border >
      <!--<el-table-column label="设备ID" prop="device.id"></el-table-column>-->
      <el-table-column label="设备ID" prop="device.deviceid"></el-table-column>  
      <el-table-column label="设备名" prop="device.title"></el-table-column>
      <el-table-column label="设备地址" prop="device.address"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="remove(scope.row)">移出组</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :total="total" :current-page="query.page" :page-size="10" @current-change="pageChange" ></el-pagination>

    <el-dialog title="设备列表" :visible.sync="showDevices" width="80%" append-to-body>
      <devicelist :groupid="groupid" @success="addDeviceSuccess"/>
    </el-dialog>
  </div>
</template>

<script>
import devicelist from './devicelist.vue';
import { pagedevice ,remove} from '@/api/equipment/group.js';
export default {
  props: ['groupid'],
  watch: {
    groupid: {
      handler: function (val) {
        if (val) {
          this.query.groupid = val;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  components: {
    devicelist,
  },
  data() {
    return {
      query: {
        groupid: '',
        page:1
      },
      total: 0,
      showDevices: false,
      dataList: [],
    };
  },
  created() {},
  methods: {
    getData() {
      pagedevice(this.query).then((res) => {
        this.dataList = res.data.data;
        this.total = res.data.total;
      });
    },
    add() {
      this.showDevices = true;
    },
    addDeviceSuccess(){
      this.getData()
    },
    remove(row){
      remove({
        group_id:row.group_id,
        device_id:row.device.id,
      }).then(res=>{
        this.$message.success("移出成功")
        this.getData()
      })
    },
    pageChange(page){
      this.query.page = page
      this.getData()
    }
  },
};
</script>

<style scoped></style>
